<template>
	<div class="app-container">
		<h4 class="form-header h4">测额项配置</h4>
		<div class="list">
			<div class="item" v-for="item in fields">
				<div class="name">{{ item.name }}</div>
				<el-switch
					v-model="item.showStatus"
					inactive-color="#aaa"
					:active-value="1"
					:inactive-value="0"
					size="small"
					@change="handleChange(item)"
				/>
			</div>
		</div>
		<h4 class="form-header h4">
			<span class="mr20">二维码有效时间(小时)</span>
			<el-input-number v-model="form4.content" step-strictly :precision="1" :step="0.5" :min="0.5" size="small" @change="submitForm(form4)" />
		</h4>
		<h4 class="form-header h4">
			<span class="mr20">是否比对所有信息项</span>
			<el-switch
				v-model="form5.content"
				inactive-color="#aaa"
				active-value="1"
				inactive-value="0"
				size="small"
				@change="submitForm(form5)"
			/>
		</h4>
		<h4 class="form-header h4">自定义提示语</h4>
		<el-form :model="form1" label-width="150px">
			<el-form-item label="填写提示">
				<el-input v-model="form1.content" type="textarea" :rows="4" placeholder="请输入内容" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(form1)">保存</el-button>
			</el-form-item>
		</el-form>
		<el-form :model="form2" label-width="150px">
			<el-form-item label="温馨提示">
				<el-input v-model="form2.content" type="textarea" :rows="4" placeholder="请输入内容" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(form2)">保存</el-button>
			</el-form-item>
		</el-form>
		<el-form :model="form3" label-width="150px">
			<el-form-item label="弹框提示">
				<el-input v-model="form3.content" type="textarea" :rows="4" placeholder="请输入内容" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(form3)">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import * as api from '@/api/quota/field';
import * as tipApi from '@/api/quota/tipSetting';
import { ref, unref } from 'vue';

const fields = ref([]);

const form1 = ref({
	code: 'code1',
	content: ''
});
const form2 = ref({
	code: 'code2',
	content: ''
});
const form3 = ref({
	code: 'code3',
	content: ''
});
const form4 = ref({
	code: 'qrNum',
	content: '2'
});
const form5 = ref({
	code: 'checkStatus',
	content: '0'
});

function getFields() {
	api.list().then(res => {
		fields.value = res.rows;
	});
}

function getTip() {
	tipApi.list().then(res => {
		[form1, form2, form3, form4, form5].forEach(form => {
			const { id, content } = res.rows.find(item => item.code === form.value.code) || {};
			form.value.id = id;
			form.value.content = content;
		});
	});
}

const handleChange = (item) => {
	const { id, showStatus } = item;
	api.update({ id, showStatus });
};

const submitForm = (data) => {
	console.log(data)
	tipApi.update(unref(data)).then(() => {
		proxy.$modal.msgSuccess('修改成功');
		getTip();
	});
};

getFields();
getTip();
</script>

<style scoped lang="less">
.list {
	padding: 10px;

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		font-size: 14px;

		.name {
			min-width: 200px;
			margin-right: 20px;
		}
	}
}
</style>
